---
id: 6571b2fccc1de61d7b4dd37f
title: Вступ до Flexbox. Запитання A
challengeType: 15
dashedName: introduction-flexbox-question-a
---

# --description--

## Перш ніж почнемо

Макети Flexbox можуть бути складними. У попередньому уроці ви дізнались, як провести огляд та налаштування за допомогою інструментів розробника в браузері. Ці інструменти будуть надзвичайно важливими в наступних уроках. Якщо щось працює не так, як ви очікуєте, в першу чергу потрібно провести перевірку в інструментах розробника.

Flexbox не складніший за інші поняття, які ми вже розглянули, але в нього трохи більше складових. На перших уроках буде складно побачити суцільну картину, допоки ви не дійдете до кінця, де поєднаєте все вивчене. Під час проходження уроків бажано <strong>звертати увагу на приклади коду.</strong>

Найімовірніше, вам доведеться повертатися і посилатися на ці уроки (або інші матеріали, які ми надаємо) під час виконання завдань в кінці розділу. Але якщо ви виділите час і експериментуватимете з усіма наданими прикладами коду, ви краще зрозумієте, що робити у певний момент.

## Пофлексимо

Flexbox — це спосіб розташувати предмети в рядки та стовпці. Ці предмети будуть гнутись (тобто збільшуватись або зменшуватись) на основі певних простих правил, які можна визначити. Для початку розглянемо простий приклад.

> Ми впровадили багато інтерактивних прикладів у цих уроках. Настав час поекспериментувати з ними, щоб запам’ятати всі поняття!

<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true"  frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/QWgNxrp?height=400&amp;default-tab=html%2Cresult&amp;slug-hash=QWgNxrp&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="Вставка CodePen" loading="lazy"></iframe>

Незабаром розберемося, що тут відбувається. Наразі розкоментуємо два пов’язаних гнучкі оголошення CSS з Codepen вище, видаливши теги `/*` та `*/` навколо них, а потім глянемо на результат.

> Коментарі заважають браузеру тлумачити рядки як код і використовуються між певними тегами. CSS використовує `/*` як початковий тег коментаря та `*/` як кінцевий тег коментаря, а HTML та JavaScript мають власний синтаксис. Прокоментовані рядки коду можна знову активувати, просто видаливши теги коментарів навколо коду.

Тепер всі три елементи div мають розташовуватись горизонтально. Якщо змінити їхній розмір за допомогою кнопок `1x`, `.5x` та `.25x`, ви побачите, як елементи `div` почнуть «гнутись». Вони заповнять доступну площу та матимуть однакову ширину.

Якщо до HTML всередині `.flex-container` додати ще один `div`, він з’явиться поруч з іншими елементами та все погнеться, щоб поміститись в межах доступної площі.

> Якщо важко побачити зміни в невеликому вбудованому CodePen, натисніть на кнопку «Edit on CodePen» або «Fork on CodePen». Це покаже приклад у повноекранному середовищі. Це особливо знадобиться для деяких наступних прикладів.

# --question--

## --text--

Що відбудеться, якщо розкоментувати два пов’язаних гнучкі оголошення CSS в CodePen?

## --answers--

Елементи `div` стануть прихованими, втративши видимість всередині контейнера.

---

Усі три елементи `div` розташуються горизонтально і розтягнуться, щоб заповнити доступну площу однаковою шириною.

---

Усі елементи `div` збільшаться і покриють весь контейнер, перекривши один одного.

---

Елементи `div` вирівняються вертикально в один стовпець, ігноруючи оголошення CSS.

## --video-solution--

2
